import React, { Component } from 'react';
import { connect } from 'dva';
import { Checkbox, Alert } from 'antd';
import Login from 'components/Login';
import styles from './Login.less';

const { UserName, Password, Submit } = Login;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
export default class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
  };

  onTabChange = type => {
    this.setState({
      type,
    });
  };

  handleSubmit = (err, values) => {
    const { type, autoLogin } = this.state;
    if (!err) {
      this.props.dispatch({
        type: 'login/login',
        payload: {
          ...values,
          type,
          autoLogin,
        },
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };

  renderMessage = content => {
    return (
      <Alert
        style={{
          marginBottom: 24,
        }}
        message={content}
        type="error"
        showIcon
      />
    );
  };

  render() {
    const { login, submitting } = this.props;
    const { type } = this.state;
    return (
      <div className={styles.main}>
        <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
          {login.status === 'error' &&
            login.type === 'account' &&
            !login.submitting &&
            this.renderMessage('账户或密码错误')}
          <UserName name="username" placeholder="请输入用户名" defaultValue="sa" />
          <Password name="password" placeholder="请输入密码" defaultValue="password" />
          {/* <Tab key="mobile" tab="手机号登录">
                    {login.status === 'error' &&
                      login.type === 'mobile' &&
                      !login.submitting &&
                      this.renderMessage('验证码错误')}
                    <Mobile name="mobile" />
                    <Captcha name="captcha" />
                  </Tab> */}
          <div>
            <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>
              自动登录
            </Checkbox>
            <a
              style={{
                float: 'right',
              }}
              href=""
            >
              忘记密码
            </a>
          </div>
          <Submit loading={submitting}> 登录 </Submit>
          {/* <div className={styles.other}>
                    其他登录方式
                    <Icon className={styles.icon} type="alipay-circle" />
                    <Icon className={styles.icon} type="taobao-circle" />
                    <Icon className={styles.icon} type="weibo-circle" />
                    <Link className={styles.register} to="/user/register">
                      注册账户
                    </Link>
                  </div> */}
        </Login>
      </div>
    );
  }
}
